<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hred{
            background-image: url("../img/demo5/bg.gif");
            background-repeat: repeat-x;
        }
        #logo{
            float: left;
        }
        #logo_text{
            color: #ffffff;
            margin-right: 50px;
            margin-top: 10px;
            float: right;
        }
        #clear{
            clear: both;
        }

        #div_border{
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }


        /*表单*/
        .td_left{
            width: 110px;
            text-align: right;
        }
        .income{
            width: 50px;
        }
    </style>
    <script>
        function checkexampleInputName1(){
            return /^\d{6,12}$/.test(document.getElementById("exampleInputName1").value);
        }
        function checkexampleInputName2(){
            return /^\w{6,12}$/.test(document.getElementById("exampleInputName2").value);
        }
        function checkexampleInputName3(){
            return /^\w{6,12}$/.test(document.getElementById("exampleInputName3").value);
        }
        function checkexampleInputName5(){
            return /^\d+$/.test(document.getElementById("exampleInputName5").value);
        }
        function checkexampleInputName6(){
            return /^\d+$/.test(document.getElementById("exampleInputName6").value);
        }
        function checkexampleInputName7(){
            return document.getElementById("exampleInputName7").checked;
        }
        function checkPassword(){
            if (document.getElementById("exampleInputName2").value == document.getElementById("exampleInputName3").value){
                return true;
            }else{
                alert("两次密码不一样");
                return false;
            }
        }

        window.onload = function (){
            //表单验证 离焦
            var exampleInputName1Element = document.getElementById("exampleInputName1");
            var exampleInputName2Element = document.getElementById("exampleInputName2");
            var exampleInputName3Element = document.getElementById("exampleInputName3");
            var exampleInputName5Element = document.getElementById("exampleInputName5");
            var exampleInputName6Element = document.getElementById("exampleInputName6");

            exampleInputName1Element.onblur = function (){
                if (checkexampleInputName1()){
                    exampleInputName1Element.style.border = "";
                }else{
                    exampleInputName1Element.style.border = "1px solid red";
                }
            }
            exampleInputName2Element.onblur = function (){
                if (checkexampleInputName2()){
                    exampleInputName2Element.style.border = "";
                }else{
                    exampleInputName2Element.style.border = "1px solid red";
                }
            }
            exampleInputName3Element.onblur = function (){
                if (checkexampleInputName3()){
                    exampleInputName3Element.style.border = "";
                }else{
                    exampleInputName3Element.style.border = "1px solid red";
                }
            }
            exampleInputName5Element.onblur = function (){
                if (checkexampleInputName5()){
                    exampleInputName5Element.style.border = "";
                }else{
                    exampleInputName5Element.style.border = "1px solid red";
                }
            }
            exampleInputName6Element.onblur = function (){
                if (checkexampleInputName6()){
                    exampleInputName6Element.style.border = "";
                }else{
                    exampleInputName6Element.style.border = "1px solid red";
                }
            }

            document.getElementById("form").onsubmit = function (){
                if (checkexampleInputName1()&&checkexampleInputName2()&&checkexampleInputName3()&&checkexampleInputName5()&&checkexampleInputName6()&&checkexampleInputName7()&&checkPassword()){
                    return true;
                }else {
                    return false;
                }
            }
        }
    </script>
</head>
<body>
    <div id="hred">
        <img src="../img/demo5/logo.gif" id="logo">
        <div id="logo_text">注册 / 登录 / 帮助</div>
        <div id="clear"></div>
    </div>
    <h2 style="text-align: center;margin: 30px">注册休闲网</h2>
    <div id="body">
        <div id="div_border">
            <form action="#" method="get" id="form">
                <table width="500px">
                    <tr>
                        <td class="td_left">用户名</td>
                        <td class="td_right"><input type="text" id="exampleInputName1" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td class="td_right"><input type="password" id="exampleInputName2" placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left">确认密码</td>
                        <td class="td_right"><input type="password" id="exampleInputName3" placeholder="确认密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td class="td_right"><input type="date" id="exampleInputName4"></td>
                    </tr>
                    <tr>
                        <td class="td_left">收入范围</td>
                        <td class="td_right"><input type="text" id="exampleInputName5" class="income"> - <input type="text" id="exampleInputName6"  class="income"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><input type="checkbox" id="exampleInputName7" ></td>
                        <td>已阅读用户协议</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-left: 100px"><input type="submit" value="注册"></td>
                    </tr>

                </table>
            </form>
        </div>
    </div>

    <div id="tail" style="text-align: center;margin: 50px">
        关于我们 │ 诚聘英才 | 联系方式 │ 帮助中心
    </div>
</body>
</html>